<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户水费查询</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/life_housekeeper/wate_index.css" />
		<script src="../../js/statistics.js"></script>
		<script src="../../js/fontset.js"></script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav header">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">水费查询</h1>
		</header>
		<div class="mui-content content-vh">
			<div class="content" id="userWaterQuery">
				
			</div>
			<div class="footer-img">
				<img src="../../images/icon/life_housekeeper/user-water-bg2.png" class="img-response"/>
			</div>
		</div>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js"></script>
		<script src="../../plugins/template/template.js"></script>
		<script src="../../js/life_housekeeper/windowTitleView.js"></script>
		<script type="text/html" id="waterQuery">	
			<div class="group-bg-box user-bg" >
				<div class="user-img-box flex-center">
					<div class="user-img-box-line flex-center">
						<span class="user-img"><img src="{{headimgUrl}}" id="userImg"/></span>
					</div>
				</div>
			{{if data}}
				<div class="search-group group-top">
					<div class="group-tit mui-text-center">
						<h3 id="userName">{{nickname}}</h3>
						<h3>当前绑定户号：{{data.code}}</h3>
					</div>
					<div class="query-table-view-cell">
						<span class="query-cell-tit">欠费水量：</span>
						<span {{if data.amount}} class="query-state-warning" {{/if}}>{{data.amount}}吨</span>
					</div>
					<div class="query-table-view-cell">
						<span class="query-cell-tit">欠费金额：</span>
						<span {{if data.amount}} class="query-state-warning" {{/if}}>{{data.money}}元</span>
					</div>	
				</div>
			</div>
			<div class="query-hint mui-text-center">
				{{if data.amount}}
				<p class="mui-text-center">请尽快前往缴费</p>
				<div class="query-btn-box">
					<button class="button-primary" id="gotoAppliay">前往缴费</button>
				</div>
				{{else}}
				<p class="mui-text-center">您无未缴水费</p>
				{{/if}}
				<button class="query-btn" id="detailBtn">用水详情</button>
			</div>	
			{{else}}
				<div class="search-group group-top">
					<div class="group-tit mui-text-center">
						<h3 id="userName">{{nickname}}</h3>
						<h3>当前绑定户号：{{code}} <span class="icon-update icon" id="update"><img src="../../images/icon/life_housekeeper/icon-update.png" class="img-response"/></span></h3>
					</div>
					<div class="query-table-view-cell mui-text-center">
						查询失败，请修改户号绑定
					</div>
					<div class="query-table-view-cell"></div>
				</div>
			</div>
			{{/if}}
	
		</script>
		<script>	
			mui.init();
			var _self,code,headimgUrl,nickName;
			mui.plusReady(function(){
				_self = plus.webview.currentWebview();
				code =_self.code;
				getData(code);
				mui("#userWaterQuery").on('tap','#detailBtn',function(){
					var data ={};
					var viewOptions = {
					url:'water_detail.html',
					id:'water_detail'
					},
					extras ={
						code:code
					},
					titleOptions = {
						title:'水费详情',
						backImg:'whiteBack'
					};
					addTitleView(viewOptions,extras,titleOptions);
				},false);
			})
//			水费查询
			function getData(code){
				plus.nativeUI.showWaiting();
				var userWaterQuery = document.getElementById("userWaterQuery");
					headimgUrl = plus.storage.getItem("cg_headimgurl");
				    nickName = plus.storage.getItem("cg_nickname");
				myAjax('home/water/arrears_new','get',{'code':code},function(result){
 					res = result.data;
 					var extrasData;
	                if(result.code == 1){
	                	mui.toast("查询失败");
	                	extrasData = {
	                		code:code,
	                		headimgUrl:headimgUrl,
	                		nickname:nickName
	                	}
	                }else{
	                	extrasData = {
	                		data:res,
	                		headimgUrl:headimgUrl,
	                		nickname:nickName
	                	}	
					}
	                var queryHtml = template('waterQuery',extrasData);
	                	userWaterQuery.innerHTML = queryHtml;
	                	plus.nativeUI.closeWaiting();
	         		
	         		mui('#userWaterQuery').on('tap','#gotoAppliay',function(e){
	         			var url = 'https://render.alipay.com/p/s/i/?scheme=alipays%3A%2F%2Fplatformapi%2Fstartapp%3FappId%3D20000193%26url%3D%252Fwww%252FeBill.htm%253Freferer%253DGOPAY%2526billKey%253D'+code+'%2526instId%253DZYSWJT4892%2526subBizType%253DWATER'
	         			 if(plus.os.name=="iOS"){
					       	plus.runtime.openURL(url);
					    }else{
					    	var viewOptions = {
								'url':url,
								'id':'alipay'
							},
							extra ={},
							titleOptions = {};
	         				mui.addTitleView(viewOptions,extra,titleOptions);
					    }	
	         		})
 				})
			}
			
		</script>
	</body>
</html>